<template>
  <div id="app">
    <!-- <div v-if="clientStart" style="display: flex;flex-direction: column;-webkit-app-region: drag;">
      <div class="empty-top">
        <div @click="close"><img style="margin: 14px 0 0 14px;" src="./assets/close.png">
        </div>
      </div>
      <div class="empty-bottom">等待LOL客户端启动</div>
    </div> -->
    <div class="container">
      <!-- <div v-if="!clientStart" class="container"> -->
      <asdie-left></asdie-left>
      <div class="container" style="width: 740px; flex-direction: column;">
        <header-top></header-top>
        <div class="main-view" style="height: 510px;background-color: #fff;">
          <router-view />
        </div>
        <footer-bottom></footer-bottom>
      </div>
    </div>
  </div>
</template>

<script>
import AsideLeft from './components/AsideLeft.vue';
import HeaderTop from './components/HeaderTop.vue';
import FooterBottom from './components/FooterBottom.vue';
import { executeCommand } from './utils/exeStart.js'
import { portRegex, passwordRegex } from './utils/regex.js'
const Base64 = require('js-base64').Base64
import { mapMutations, mapGetters } from "vuex";
const { ipcRenderer } = window.require('electron')
export default {
  components: {
    'asdie-left': AsideLeft,
    'header-top': HeaderTop,
    'footer-bottom': FooterBottom
  },
  data() {
    return {
      // 密钥
      key: {},
      // 客户端状态
      clientStart: false,
      // 玩家状态
      userState: '',
      // 玩家信息
      userInfo: {},
    }
  },
  watch: {
    userState(newVal, oldVal) {
      switch (newVal) {
        // 大厅
        case 'None':
          console.log(this.userState);
          break;
        // 房间
        case 'Lobby':
          console.log(this.userState);
          break;
        // 寻找对局中
        case 'Matchmaking':
          console.log(this.userState);
          break;
        // 等待接受对局
        case 'ReadyCheck':
          this.acceptMatch()
          console.log(this.userState);
          break;
        // 正在选择英雄
        case 'ChampSelect':
          this.selectChamp()
          console.log(this.userState);
          break;
        // 访问接口异常
        case 'offline':
          console.log(this.userState);
          break;
      }
    }
  },
  created() {
  },
  mounted() {
    // 获取LOL密钥
    this.authInfo()
  },
  methods: {
    ...mapGetters(['getStoreReadyValue']),
    ...mapMutations(['setStoreKey', 'setStoreClientStart', 'setStoreUserState', 'setStoreUserInfo']),
    async close() {
      ipcRenderer.send('detach:vue', { type: 'close' })
    },
    // 获取LOL密钥
    async authInfo() {
      const rawStdout = await executeCommand(
        "wmic PROCESS WHERE name='LeagueClientUx.exe' GET commandline /value  | find /v \"\""
      );
      if (rawStdout != null) {
        // 拿到cmd获取到的端口号和token
        const stdout = rawStdout.replace(/\n|\r/g, "");
        const [, port] = stdout.match(portRegex)
        const [, password] = stdout.match(passwordRegex)
        const token = Base64.encode('riot:' + password)
        console.log(port);
        console.log(password);
        this.key = {
          port: port,
          token: token
        }
        // 把获取到的端口号和token放入store
        this.setStoreKey(this.key)
        // 开始获取玩家信息
        this.getUserInfo()
      } else {
        this.clientStart = false
        this.setStoreClientStart(this.clientStart)
        // 重置玩家状态和玩家信息
        this.userState = 'offline'
        this.setStoreUserState(this.userState)
        this.userInfo = {}
        this.setStoreUserInfo(this.userInfo)
        console.log('未运行客户端!');
        setTimeout(() => {
          this.authInfo()
        }, 5000)
      }
    },
    // 获取玩家信息
    async getUserInfo() {
      const key = this.key
      const result = ipcRenderer.sendSync('getUserInfo:vue', { key });
      // 还没获取到游戏名字,继续访问接口
      if (!result.displayName) {
        setTimeout(() => {
          this.getUserInfo()
        }, 3000);
      } else {
        this.clientStart = true
        this.userInfo = result
        this.setStoreUserInfo(this.userInfo)
        this.getUserState()
      }
    },
    // 获取玩家状态
    async getUserState() {
      const key = this.key
      let timer = setTimeout(() => {
        this.getUserState()
      }, 1000);
      ipcRenderer.send('getUserState:vue', { key });
      ipcRenderer.on('getUserState:server', async (event, arg) => {
        this.userState = arg.state
      });
      ipcRenderer.on('getUserStateError:server', async (event, arg) => {
        this.userState = arg.state
      });
      this.setStoreUserState(this.userState)
      // 当userState为offline时判定为离线,关闭定时器,重新执行authInfo()方法
      if (this.userState == 'offline') {
        clearTimeout(timer)
        this.authInfo()
      }
    },
    // 接受对局
    async acceptMatch() {
      // 先判断用户是否选择自动接受对局
      if (this.getStoreReadyValue()) {
        ipcRenderer.send('acceptMatch:vue', { info: 'acceptMatch' })
      }
    },
    // 选择英雄确定
    async selectChamp() {
      // 先确定用户有没有配置英雄
      if (this.getStoreRoleValue() !== -1) {
        // 获取用户选择界面是几号位
        const result = ipcRenderer.sendSync('getActionId:vue')
        if (result == 'getActionIdError') {
          return
        }
        const actionId = result.localPlayerCellId
        console.log(actionId);
        let id = this.getStoreRoleValue()
        let params = {
          actionId: actionId,
          championId: id,
          type: 'pick',
          completed: true
        }
        // 选择英雄
        const result_1 = ipcRenderer.sendSync('selectChamp:vue', { params })
        console.log(result_1);
        if (result_1 == 'selectChampError') {
          return
        }
      }
    }
  }
}
</script>

<style lang="scss">
#app {
  width: 100%;
  height: 100%;
}

.container {
  display: flex;
  height: 100%;
}

.empty-top {
  display: flex;
  flex-direction: row-reverse;
  border-radius: 10px 10px 0 0;
  width: 100%;
  height: 60px;
  background-color: #ccc;

  div {
    width: 60px;
    cursor: pointer;
    border-radius: 10px;
    -webkit-app-region: no-drag;
  }

  div:hover {
    background-color: #FF5252;
  }
}

.empty-bottom {
  width: 100%;
  height: 540px;
  font-size: 50px;
  text-align: center;
  border-radius: 0 0 10px 10px;
  line-height: 420px;
  color: #646464;
  background-color: #ccc;
}
</style>